import React from 'react'

/**
 * 多表达元素优化
 * 
 * 1. 给每个表单都添加 name 属性，属性值和 value 值一致
 * 2. 通过 e.target.type 获取元素的类型，根据类型或者元素的值
 * 3. 在事件处理程序 change 中，通过获取到的表单的 name 值对 state 中数据进行修改
 */

export default class App extends React.Component {
  state = {
    val: '',
    content: '',
    selectValue: '',
    isChecked: false
  }

  change = (e) => {
    // 获取表单元素对象
    const target = e.target
    // 获取表单元素类型以及值
    const value = target.type === 'checkbox' ? target.checked : target.value

    // 获取表单元素的的 name 属性
    const name = target.name
    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <div>
        <input name="val" type="text" value={this.state.val} onChange={this.change} />
        <textarea name="content" cols="10" rows="3" value={this.state.content} onChange={this.change}></textarea>
        <select name="selectValue" value={this.state.selectValue} onChange={this.change}>
          <option value="ys">亚瑟</option>
          <option value="dj">妲己</option>
          <option value="dw">典韦</option>
        </select>
        <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.change} />
      </div>
    )
  }
}
